<template>
  <div>
    <div class="block">
      <el-date-picker
          v-model="queryParam.date"
          type="month"
          @change="init"
          placeholder="选择月">
      </el-date-picker>
      <el-select v-model="queryParam.storeName" placeholder="请选择" style="margin-left: 20px" @change="init">
        <el-option
            v-for="item in storeList"
            :key="item.storeName"
            :label="item.storeName"
            :value="item.storeName">
        </el-option>
      </el-select>
      <el-button type="success" style="margin-left: 20px" @click="refresh">刷新</el-button>
    </div>
    <el-row>
      <el-col :span="24" style="float: left;margin-top: 30px">
        <span style=" letter-spacing: 2px;">{{ currentDate }}月进帐金额</span>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div id="container">
          <!-- 存放图形的div -->
          <div id="moneyStatics"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>

export default {
  name: "MoneyEcharts",
  data() {
    return {
      queryParam: {
        date: "",
        storeName: "",
      },
      currentDate: "",
      storeList: [],
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.initChar();
      this.initStore();
    },
    refresh() {
      this.queryParam.date = "";
      this.queryParam.storeName = "";
      this.init();
    },
    initStore() {
      this.$http.get("/saleManagement/store/selectAllStore").then((res => {
        if (res.data.code === 200) {
          this.storeList = res.data.data;
        }
      }))
    },
    initChar() {
      this.$http.post("saleManagement/store/findIncome", this.queryParam).then((res => {
        this.currentDate = res.data.data.date;
        const myChart = this.$echarts.init(document.getElementById('moneyStatics'));
        myChart.setOption({
          title: {
            text: "商家进帐金额统计图",
          },
          //提示信息
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: res.data.data.storeName
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: res.data.data.storeName,
            axisLabel: {
              rotate: 30, //让文本倾斜
              interval: 0,
              textStyle: {
                color: "#23262e",
                fontSize: 12
              },
            },
          },
          yAxis: {},
          series: [
            {
              name: res.data.data.storeName,
              barWidth: "25%",
              type: 'bar',
              data: res.data.data.sum,
              //柱状图具体数字
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    fontSize: 13,
                    fontWeight: "bold",
                    marginTop: 15,
                    position: "top",
                  }
                }
              }
            }
          ]
        })
      }))
    },

  }
}
</script>
<style scoped>
#moneyStatics {
  height: 500px;
  width: 900px;
}

#container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
</style>